import { memo, useState } from 'react'
import classnames from 'classnames'
import { useDispatch, useSelector } from 'react-redux'
import differenceBy from 'lodash/differenceBy'

// import { getRecommendChannel, deleteChannel, addChannel } from '@/store/actions'

import Icon from '@/components/icon'
// import { isAuth } from '@/utils'
import styles from './index.module.scss'
import { addChannel, delChannel } from '../../store/action'
import { Toast } from 'antd-mobile'

const Channels = ({ userChannles = [], index, onClose, onChange }) => {
  const channelsList = useSelector((state) => {
    const { channels, allChannels } = state.HomeReducer
    return differenceBy(allChannels, channels, 'id')
  })

  const [isEdit, setIsEdit] = useState(false)

  const onEdit = () => setIsEdit(!isEdit)

  const dispatch = useDispatch()
  const onChannelItemClick = (item, i) => {
    if (isEdit) {
      if (item.id !== 0) {
        if (item.length <= 4) {
          return Toast.info('至少保留四个')
        }
        dispatch(delChannel(item.id))
        if (i < index) {
          onChange(index - 1)
        } else if (i === index) {
          onChange(0)
        }
      }
      return
    }
    onChange(i)
    onClose()
  }

  const onAddChannel = (item) => {
    dispatch(addChannel(item))
    Toast.success('添加成功!')
  }

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onClose} />
      </div>
      <div className="channel-content">
        <div className={classnames('channel-item', isEdit ? 'edit' : '')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              点击{isEdit ? '删除' : '进入'}频道
            </span>
            <span className="channel-item-edit" onClick={onEdit}>
              {isEdit ? '保存' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {userChannles.map((item, i) => (
              <span
                key={item.id}
                className={classnames(
                  'channel-list-item',
                  i === index ? 'selected' : ''
                )}
                onClick={() => onChannelItemClick(item, i)}
              >
                {item.name}
                {item.id !== 0 && <Icon type="iconbtn_tag_close" />}
              </span>
            ))}

            {/* <span className="channel-list-item">开发者资讯</span> */}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
            {/* <span className="channel-item-edit">编辑</span> */}
          </div>
          <div className="channel-list">
            {channelsList.map((item) => (
              <span
                key={item.id}
                className="channel-list-item"
                onClick={() => onAddChannel(item)}
              >
                + {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default memo(Channels)
